<template>
  <div>
    <p>个人信息设置</p>
    <el-divider></el-divider>

    <el-form
      ref="form"
      status-icon
      :model="form"
      :rules="rules"
      label-width="80px"
      style="width: 65%"
    >
      <el-form-item class="uhead" label="头像" prop="uhead">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:9000/upload"
          :on-success="handleAvatarSuccess"
          :show-file-list="false"
        >
          <img
            style="border-radius: 50%"
            v-if="form.uhead"
            :src="form.uhead"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="用户名" prop="uname">
        <el-input v-model="form.uname"></el-input>
      </el-form-item>
      <el-form-item label="账号" prop="user">
        <el-input v-model="form.user" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" round @click="onSubmit" style="width: 100px"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import myaxios from '@/http/MyAxios'
export default {
  data() {
    return {
      aa: { user: JSON.parse(sessionStorage.getItem('user')).user },
      user: [],
      form: {
        uname: '',
        user: '',
        phone: '',
        uhead: '',
      },
      rules: {
        uname: [
          { required: true, message: '请输用户名', trigger: 'blur' },
          {
            pattern: /^.{2,16}$/,
            message: '用户名应为2~16个字符',
            trigger: 'blur',
          },
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号格式错误',
            trigger: 'blur',
          },
        ],
        uhead: { required: true, message: '必须选择一张图片' },
      },
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!')
      // 先验证表单是否符合要求
      this.$refs['form'].validate((valid) => {
        if (valid) {
          console.log('验证通过！')

          //   修改信息业务

          this.$http.yhApi.update(this.form).then((res) => {
            console.log('修改信息', res)
            if (res.data.code == 200) {
              // 添加成功
              this.$message({
                message: '修改信息完成',
                type: 'success',
              })
            }
          })
        }
      })
    },
    handleAvatarSuccess(res, file) {
      console.log(res)
      // 将上传成功后的图片访问地址，存入data
      this.form.uhead = res.data
    },
  },
  /** 组件挂载完毕后自动调用 生命周期方法 */
  mounted() {
    // 查询业务
    let name = this.$store.state.user
    console.log('name', name)

    this.$http.yhApi.query(this.aa).then((res) => {
      console.log('此用户信息', res)
      // 存入data.form数组
      this.user = res.data.data
      console.log('user', this.user)
      console.log('form1', this.form)
      this.form.uname = this.user[0].uname
      this.form.user = this.user[0].user
      this.form.phone = this.user[0].phone
      this.form.uhead = this.user[0].uhead
      console.log('form2', this.form)
    })
  },
}
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-main {
  div {
    position: relative;
  }
  .uhead {
    // background-color: #409eff;
    position: absolute;
    right: 0;
  }
}
</style>
